<template>
  <common-list-group class="screen-config-container">
    <div slot="group" class="screen-config">
      <common-tree
        :treeData="menuTree"
        :treeProp="treeProp"
        is-slot
        :indent="8"
        :is-show-filter="false"
        :currentNodeKey="currentNodeKey"
        ref="treeRef"
      >
        <div style="width: 100%" slot-scope="{ scope }">
          <div class="common-tree-node">
            <div class="tree-label">
              <common-carousel-text :content="scope.node.label" :font-size="14">
              </common-carousel-text>
            </div>

            <el-popover
              placement="right-start"
              width="150"
              :offset="-2"
              v-model="scope.data.isPopover"
              trigger="hover"
            >
              <div class="popover-button-container">
                <div
                  class="button-item"
                  v-if="!scope.data.leaf && scope.node.level < 2"
                  @click.stop="addSpecial(scope.data)"
                  v-hasPermi="['system:subject:add']"
                >
                  新增专题
                </div>
                <div
                  class="button-item"
                  v-if="!scope.data.leaf && scope.node.level !== 1"
                  @click.stop="editSpecial(scope.data)"
                  v-hasPermi="['system:subject:edit']"
                >
                  重命名
                </div>
                <div
                  class="button-item"
                  v-if="!scope.data.leaf && scope.node.level < 3"
                  @click.stop="addComponent(scope.data)"
                  v-hasPermi="['system:reportconfig:add']"
                >
                  新增报表
                </div>
                <div
                  class="button-item"
                  v-if="scope.node.level > 1"
                  @click.stop="delSpecial(scope.data)"
                  v-hasPermi="['system:subject:remove']"
                >
                  删除
                </div>
              </div>
              <div class="tree-menu" slot="reference">
                <i class="iconfont icon-more"></i>
              </div>
            </el-popover>
          </div>
        </div>
      </common-tree>

      <!--      <el-tree-->
      <!--        :data="menuTree"-->
      <!--        :props="treeProp"-->
      <!--        :expand-on-click-node="false"-->
      <!--        :default-expand-all="true"-->
      <!--        :indent="8"-->
      <!--        :filter-node-method="filterNode"-->
      <!--        ref="menuTree"-->
      <!--      >-->
      <!--        <div slot-scope="{ node, data }" class="common-tree-node">-->
      <!--          <div class="tree-label">-->
      <!--            <common-carousel-text-->
      <!--              :content="node.label"-->
      <!--              :index="node.id"-->
      <!--              :font-size="14"-->
      <!--            >-->
      <!--            </common-carousel-text>-->
      <!--          </div>-->

      <!--          <el-popover-->
      <!--            placement="right-start"-->
      <!--            width="150"-->
      <!--            :offset="-2"-->
      <!--            v-model="data.isPopover"-->
      <!--            trigger="hover"-->
      <!--          >-->
      <!--            <div class="popover-button-container">-->
      <!--              <div-->
      <!--                class="button-item"-->
      <!--                v-if="!data.leaf && node.level < 2"-->
      <!--                @click.stop="addSpecial(data)"-->
      <!--                v-hasPermi="['system:subject:add']"-->
      <!--              >-->
      <!--                新增专题-->
      <!--              </div>-->
      <!--              <div-->
      <!--                class="button-item"-->
      <!--                v-if="!data.leaf && node.level !== 1"-->
      <!--                @click.stop="editSpecial(data)"-->
      <!--                v-hasPermi="['system:subject:edit']"-->
      <!--              >-->
      <!--                重命名-->
      <!--              </div>-->
      <!--              <div-->
      <!--                class="button-item"-->
      <!--                v-if="!data.leaf && node.level < 3"-->
      <!--                @click.stop="addComponent(data)"-->
      <!--                v-hasPermi="['system:reportconfig:add']"-->
      <!--              >-->
      <!--                新增报表-->
      <!--              </div>-->
      <!--              <div-->
      <!--                class="button-item"-->
      <!--                v-if="node.level > 1"-->
      <!--                @click.stop="delSpecial(data)"-->
      <!--                v-hasPermi="['system:subject:remove']"-->
      <!--              >-->
      <!--                删除-->
      <!--              </div>-->
      <!--            </div>-->
      <!--            <div class="tree-menu" slot="reference">-->
      <!--              <i class="iconfont icon-more"></i>-->
      <!--            </div>-->
      <!--          </el-popover>-->
      <!--        </div>-->
      <!--      </el-tree>-->
    </div>

    <div slot="content">
      <span
        class="chart-box theme1"
        v-for="(item, index) in chartList"
        :key="index"
      >
        {{ item.name }}</span
      >
    </div>

    <!--  新增/编辑 专题  -->
    <common-edit-dialog
      :visible.sync="isSpecialDialog"
      :title="isSpecialEdit ? '重命名' : '新增'"
      width="500px"
      :button-loading="isPersistenceLoading"
      @cancel="closeSpecial"
      @submit="persistence"
    >
      <el-form
        ref="specialForm"
        :model="specialForm"
        :rules="specialRules"
        label-width="100px"
      >
        <el-form-item label="专题名称" prop="name">
          <common-input
            :maxlength="16"
            v-model="specialForm.name"
          ></common-input>
        </el-form-item>
      </el-form>
    </common-edit-dialog>
    <!--  专题下 关联报表  -->
    <common-edit-dialog
      :visible.sync="isBindDialog"
      title="新增报表"
      :button-loading="buttonLoading"
      @cancel="closeBind"
      @submit="bindPersistence"
    >
      <el-form
        ref="bindForm"
        :model="bindForm"
        :rules="bindRules"
        label-width="60px"
      >
        <el-form-item label="报表" prop="id">
          <el-select v-model="bindForm.id">
            <el-option
              v-for="chart in chartList"
              :key="chart.id"
              :label="chart.name"
              :value="chart.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </common-edit-dialog>
  </common-list-group>
</template>

<script>
import vuedraggable from "vuedraggable";
import {
  report_queryList,
  report_tree,
  report_subject_add,
  report_subject_edit,
  report_subject_remove,
  report_dragReport,
  report_type_drop,
} from "@/api/management/echart/report-config";
import BaseList from "@/mixins/BaseList";

export default {
  mixins: [BaseList],
  components: { vuedraggable },
  props: {},
  data() {
    return {
      isPersistenceLoading: false,
      menuTree: [],
      chartList: [],
      treeProp: {
        children: "children",
        label: "name",
      },
      dropdown: {},

      isSpecialDialog: false,
      isSpecialEdit: false,
      specialForm: {
        id: null,
        parentId: null,
        name: "",
      },
      specialRules: {
        name: [{ required: true, message: "请输入专题名称", trigger: "blur" }],
      },

      isBindDialog: false,
      bindForm: {
        id: null,
        parentId: null,
      },
      bindRules: {
        id: [{ required: true, message: "请选择报表", trigger: "blur" }],
      },
      currentNodeKey: "",
      buttonLoading: false,
    };
  },
  computed: {},
  methods: {
    dragStart(e, d) {
      e.dataTransfer.setData("componentId", d.id);
    },
    drop(e, d) {
      // console.log('111')
      /*let componentId = e.dataTransfer.getData('componentId')

        if (!this.isPersistenceLoading) {
          this.isPersistenceLoading = true
          report_dragReport({
            id: componentId,
            typeId: d.leaf ? d.parentId : d.id
          })
            .then((res) => {
              if (res && res.code === 200) {
                this.initData()
                this.$GlobalSuccessMessage('新增成功')
              } else {
                this.$GlobalErrorConfirm('新增失败', res.msg)
              }
            })
            .catch((err) => {
              this.$GlobalErrorConfirm('新增失败', err.msg)
            })
            .finally(() => {
              this.isPersistenceLoading = false
            })
        }*/
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },

    // 数据获取
    getTree() {
      report_tree({})
        .then((res) => {
          if (res && res.code === 200) {
            this.menuTree = res.data;
          } else {
            this.menuTree = [];
            this.handleListTips(res);
          }
        })
        .catch((err) => {
          this.menuTree = [];
          this.handleListTips(err);
        });
    },
    getCompList() {
      report_queryList({})
        .then((res) => {
          if (res && res.code === 200) {
            this.chartList = res.data;
          } else {
            this.chartList = [];
          }
        })
        .catch((err) => {
          this.chartList = [];
        });
    },
    initData() {
      this.getTree();
      this.getCompList();
    },

    /**
     * 新增专题
     */
    addSpecial(data) {
      this.isSpecialDialog = true;
      this.isSpecialEdit = false;
      this.specialForm.parentId = data.id;
      this.currentNodeKey = data.id;
      this.$refs.treeRef.$refs.tree.setCurrentKey(this.currentNodeKey);
    },
    /**
     * 编辑专题
     */
    editSpecial(data) {
      this.isSpecialDialog = true;
      this.isSpecialEdit = true;
      this.specialForm.id = data.id;
      this.specialForm.name = data.name;
      this.currentNodeKey = data.id;
      this.$refs.treeRef.$refs.tree.setCurrentKey(this.currentNodeKey);
    },
    /**
     * 删除专题或者组件
     * @param data
     */
    delSpecial(data) {
      this.$GlobalDeleteConfirm()
        .then(() => {
          if (data.leaf) {
            report_type_drop({ id: data.id }).then((res) => {
              this.initData();
              this.$GlobalSuccessMessage("删除成功");
            });
          } else {
            report_subject_remove({ id: data.id }).then((res) => {
              this.initData();
              this.$GlobalSuccessMessage("删除成功");
            });
          }
        })
        .catch(() => {});
    },
    /**
     * 关闭弹框
     */
    closeSpecial() {
      this.isSpecialDialog = false;
      this.specialForm.id = null;
      this.specialForm.parentId = null;
      this.specialForm.name = "";
    },
    /**
     * 数据持久化
     */
    persistence() {
      this.$refs["specialForm"].validate((valid) => {
        if (valid) {
          if (!this.isPersistenceLoading) {
            this.isPersistenceLoading = true;

            if (this.isSpecialEdit) {
              report_subject_edit({
                id: this.specialForm.id,
                parentId: this.specialForm.parentId,
                name: this.specialForm.name,
              })
                .then((res) => {
                  if (res && res.code === 200) {
                    this.initData();
                    this.$GlobalSuccessMessage("编辑成功");
                  } else {
                    this.$GlobalErrorConfirm("编辑失败", res.msg);
                  }
                })
                .catch((err) => {
                  this.$GlobalErrorConfirm("编辑失败", err.msg);
                })
                .finally(() => {
                  this.isPersistenceLoading = false;
                  this.closeSpecial();
                });
            } else {
              report_subject_add({
                parentId: this.specialForm.parentId,
                name: this.specialForm.name,
              })
                .then((res) => {
                  if (res && res.code === 200) {
                    this.initData();
                    this.$GlobalSuccessMessage("新增成功");
                  } else {
                    this.$GlobalErrorConfirm("新增失败", res.msg);
                  }
                })
                .catch((err) => {
                  this.$GlobalErrorConfirm("新增失败", err.msg);
                })
                .finally(() => {
                  this.isPersistenceLoading = false;
                  this.closeSpecial();
                });
            }
          }
        }
      });
    },
    /**
     * 添加报表
     * @param data
     */
    addComponent(data) {
      this.isBindDialog = true;
      this.bindForm.parentId = data.id;
      this.currentNodeKey = data.id;
      this.$refs.treeRef.$refs.tree.setCurrentKey(this.currentNodeKey);
    },
    closeBind() {
      this.isBindDialog = false;
      this.bindForm.id = null;
      this.bindForm.parentId = null;
    },
    bindPersistence() {
      this.$refs["bindForm"].validate((valid) => {
        if (valid) {
          this.buttonLoading = true;
          let params = {
            id: this.bindForm.id,
            typeId: this.bindForm.parentId,
          };
          report_dragReport(params)
            .then((res) => {
              if (res && res.code === 200) {
                this.initData();
                this.$GlobalSuccessMessage("新增成功");
              } else {
                this.$GlobalErrorConfirm("新增失败", res.msg);
              }
            })
            .catch((err) => {
              this.$GlobalErrorConfirm("新增失败", err.msg);
            })
            .finally(() => {
              this.buttonLoading = false;
              this.closeBind();
            });
        }
      });
    },
  },
  created() {
    this.initData();
  },
  mounted() {},
};
</script>
<style lang="scss" scoped>
.screen-config-container {
  .screen-config {
    overflow: scroll;
    max-height: calc(100% - 40px);

    ::v-deep .common-tree-node {
      width: 100%;
      display: flex;
      align-items: center;

      .tree-label {
        /*overflow: hidden;*/
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        width: calc(100% - 16px);
      }

      .tree-menu {
        opacity: 0;
        width: 14px;
        height: 14px;
        line-height: 14px;
        font-size: 12px;
        color: #909399;
      }

      &:hover {
        .tree-menu {
          opacity: 1;
        }
      }
    }
  }

  .chart-box {
    display: inline-block;
    margin: 10px 1%;
    width: 18%;
    height: 100px;
    border: 1px solid #dcdfe6;
    border-radius: 6px;
    color: #606266;
    cursor: pointer;
    text-align: center;
    line-height: 100px;
    word-break: keep-all;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
    user-select: none;

    &.theme1 {
      color: #409eff;
      background: #ecf5ff;
      border-color: #b3d8ff;
    }

    &.theme2 {
      color: #67c23a;
      background: #f0f9eb;
      border-color: #c2e7b0;
    }

    &.theme3 {
      color: #e6a23c;
      background: #fdf6ec;
      border-color: #f5dab1;
    }

    &.theme4 {
      color: #f56c6c;
      background: #fef0f0;
      border-color: #fbc4c4;
    }
  }
}

.popover-button-container {
  display: flex;
  flex-direction: column;
  width: 100%;

  .button-item {
    height: 24px;
    line-height: 24px;
    margin-bottom: 4px;
    padding: 0 2px;
    cursor: pointer;

    &:last-child {
      margin-bottom: 0;
    }

    &:hover {
      background-color: #f5f7fa;
    }
  }
}
</style>
